<template>

  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="list-switch">列表</van-tabbar-item>
    <van-tabbar-item icon="cart-o" @click="$router.push('/gouwuche')">购物车</van-tabbar-item>
    <van-tabbar-item icon="contact-o" @click="$router.push('/login')">我的</van-tabbar-item>
  </van-tabbar>
  <van-search
    v-model="keword"
    placeholder="请输入搜索关键词"
    shape="round"
    background="#2b80f5"
    @click-left-icon="inputenter" />
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="i in productarr" :key="i.proid">
      <van-image class="swiper-img" :src="i.img4" icon-size="100vw" />
    </van-swipe-item>

  </van-swipe>
  <van-grid :column-num="5">
    <van-grid-item v-for="i in caidan" :key="i.id" :icon="i.icon"  :text="i.title" />
  </van-grid>
  <van-row :gutter="[20, 20]" class="product-list">
    <van-col v-for="i in productarr" :key="i.proid" span="12" class="product-item"
      @click="$router.push('/xiangqing?id=' + i.proid)">
      <img :src="i.img1" class="van-ellipais" />
      <span>{{ i.proname }}</span>
    </van-col>
  </van-row>
</template>
<script>
import { productListRequset } from '@/api/homeApi';
import { productChakancaidanRequset } from '@/api/homeApi';

export default {
  data() {
    return {
      keword: "",
      active: 0,
      productarr: [],
      caidan: []
    }
  },
  methods: {
    inputenter() {
      this.$router.push("/sousuo?str=" + this.keword);
    }
  },
  mounted() {
  },
  async created() {
    let res = await productListRequset();
    // console.log(res.data);
    if (res.data.code === "200") {
      this.productarr = res.data.data;
    }
    let caidan = await productChakancaidanRequset()
    // console.log("菜单是", caidan.data.data);
    this.caidan = caidan.data.data;

  }
}
</script>
<style lang="css" scoped>
.van-button-class {
  width: 187.5px;
}

.van-swipe-item {
  width: 100vw;
  height: 200px;
}

.swiper-img {
  width: 100vw;
  height: 200px;
}
</style>
<style lang="scss" scoped>
.product-item {
  height: 240px;
  img {
    width: 100%;
  }
}

.product-list {
  padding-bottom: 55px;

}

.search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 100;
}
</style>
